<template>
    <div id="app">
        <div class="head bj">
            <div class="head-nav">
                <div class="head-tit fl">
                    <span class="logo-font">国网供应链金融全寿命周期动态利率盘</span>
                </div>
                <el-menu
                    :default-active="activeIndex"
                    class="el-menu-demo fl"
                    mode="horizontal"
                    text-color="#000000"
                >
                    <el-menu-item index="1" @click="handleSelect(0)">
                        <i class="el-icon-s-claim"></i>
                        单笔定位各阶段实时利率
                    </el-menu-item>
                    <el-menu-item index="2" @click="handleSelect(1)">
                        <i class="el-icon-s-data"></i>
                        全量定单特定阶段实时利率
                    </el-menu-item>
                    <el-menu-item index="3" @click="handleSelect(2)">
                        <i class="el-icon-s-marketing"></i>
                        细分行业实时利率
                    </el-menu-item>
                </el-menu>
            </div>
        </div>
        <div class="main">
            <router-view></router-view>
        </div>
        <div class="footer">国网供应链金融全寿命周期动态利率盘</div>
    </div>
</template>

<script>
// @ is an alias to /src
import Head from '@/components/Layout/head'
import Nav from '@/components/Layout/nav'
export default {
    name: 'Home',
    components: { Nav },
    data() {
        return {
            activeIndex: '1',
            path: ['/SingleStroke', '/TotalQuantity', '/Fine'],
        }
    },
    mounted() {
        console.log(this.$router.options.routes)
    },
    methods: {
        handleSelect(index) {
            this.$router.push(this.path[index])
        },
    },
}
</script>
<style lang="scss">
body {
    padding: 0;
    margin: 0 !important;
}
.bj {
    box-shadow: 0px 36px 54px -15px rgba(0, 0, 0, 0.1);
}
.head {
    width: 100%;
    height: 83px;
    .head-nav {
        width: 1345px;
        margin: 0 auto;
        padding-top: 15px;
        line-height: 41px;
    }
}
.main {
    border-top: 1px;
    width: 1381px;
    margin: 0 auto;
    position: relative;
}
.head-tit {
    text-align: left;
    width: 629px;
    height: 40px;
    line-height: 40px;
}
.el-menu.el-menu--horizontal {
    border-bottom: none !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
    border-bottom: none !important;
    color: #00796a !important;
    font-weight: bold;
}
.el-menu--horizontal > .el-menu-item {
    height: 50px !important;
    line-height: 50px !important;
}
.logo-font {
    font-size: 16px;
    font-weight: bold;
    padding-top: 6px;
    display: block;
    color: #00796a;
}
</style>
